<!--
 * @Author: your name
 * @Date: 2021-11-10 15:32:04
 * @LastEditTime: 2021-12-04 08:54:46
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \li-yuwei\admin\src\views\home\poster\index.vue
-->
<template>
  <div class="poster-box">
    <el-card>
      <el-upload
        drag
        action
        :http-request="handleUpload"
        :before-upload="beforeUpload"
        style="flex: 1; text-align: center"
      >
        <i class="el-icon-upload"></i>
        <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
        <p class="ant-upload-hint">文件将上传到 OSS, 如未配置请先配置</p>
      </el-upload>
    </el-card>

    <el-card class="box-card">
      <div class="input-box">
        <div class="title-input-box">
          <div>文件名称:</div>
          <el-input placeholder="请输入文件名称" v-model="fileVal"> </el-input>
        </div>
      </div>
      <div class="search-btn-box">
        <el-button type="primary" @click="getEmail(1, pageSize)"
          >搜索</el-button
        >
        <el-button @click="resetVal">重置</el-button>
      </div>
    </el-card>
    <a-table :columns="columns" :data-source="data">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
      <span slot="tags" slot-scope="tags">
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="
            tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'
          "
        >
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a>Invite 一 {{ record.name }}</a>
        <a-divider type="vertical" />
        <a>Delete</a>
        <a-divider type="vertical" />
        <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
      </span>
    </a-table>
  </div>
</template>

<script>
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { put, signatureUrl, getFileNameUUID } from "@/utils/oss.js";
export default {
  data() {
    return {
      fileVal: "",
    };
  },
  methods: {
    beforeUpload(file) {
      return true;
    },
    async handleUpload(option) {
      NProgress.start();
      // // 获取文件的后缀名
      var obj = option.file.name;
      var index = obj.lastIndexOf(".");
      obj = obj.substring(index, obj.length);
      // 生成的文件名，保留文件后缀名，进行拼接
      let objName = getFileNameUUID() + option.file.name;
      // 调用 ali-oss 中的方法,flieName是存放的文件夹名称，可自己定义
      await put(`flieName/${objName}`, option.file).then((res) => {
        console.log(res);
        // 上传成功之后，转换真实的地址
        signatureUrl(`flieName/${objName}`).then((res) => {
          console.log(res);
        });
      });
      this.$message({
        type: "success",
        message: "上传成功",
      });
      NProgress.done();
    },
  },
};
</script>

<style lang="scss" scoped>
.poster-box {
  padding: 20px;
}
.box-card {
  margin: 20px 0;
}
.search-box {
  width: 95%;
  margin: 0 auto;
  margin-top: 25px;
  margin-bottom: 15px;
  .input-box {
    display: flex;
  }
}
.input-box .title-input-box {
  margin: 0 20px;
  display: flex;
  align-items: center;

  div {
    width: 65px;
  }
  .el-input {
    width: 250px;
    margin-left: 10px;
  }
}
.search-btn-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .el-button {
    height: 35px;
    line-height: 12px;
  }
}
</style>
